<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="info" :disabled="store_btn" @click="add_dialog_visible = true">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="list" border default-expand-all row-key="id">
        <el-table-column label="分类名称" prop="title" fixed="left" width="200"></el-table-column>

        <el-table-column label="图片" align="center" prop="image_url" width="200">
          <template slot-scope="scope">
            <el-image class="list_image" :src="scope.row.image_url" :preview-src-list="[scope.row.image_url]">
              <div slot="error" class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" width="100">
          <template slot-scope="scope">
              <el-input v-model="scope.row.sort" :disabled="sorts_btn" @blur="set_sorts(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="150">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.status?'显示':'隐藏'" placement="top" :enterable="false">
              <el-switch v-model="scope.row.status" :disabled="status_btn" active-color="#5FB878" inactive-color="#d2d2d2" @change="set_status(scope.row)"></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" align="center" prop="created_at" width="200" sortable></el-table-column>
        <el-table-column label="编辑时间" align="center" prop="updated_at" width="200" sortable></el-table-column>
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.level<3" :disabled="create_sublevel_btn" type="warning" icon="iconfont icon-xiaji" size="mini" @click="sublevel(scope.row)">添加子级</el-button>
            <el-button :disabled="edit_btn" type="primary" icon="iconfont icon-bianji" size="mini" @click="edit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加子级对话框 -->
    <el-dialog title="添加子级" :visible.sync="sublevel_dialog_visible" :width="percentage_width" @close="sublevel_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="sublevel_form" :rules="rules"  ref="sublevel_ref">
        <el-form-item label="父级">
          <el-input v-model="sublevel_form.sublevel_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="title">
          <el-input placeholder="请输入分类名称" maxlength="30" clearable show-word-limit v-model="sublevel_form.title"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <s-file-image @confirm_imsge="sublevel_confirm_image"></s-file-image>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="sublevel_form.sort"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="sublevel_dialog_visible = false">取 消</el-button>
        <el-button :disabled="create_sublevel_btn" type="primary" @click="create_sublevel()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="add_dialog_visible" :width="percentage_width" @close="add_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="add_form" :rules="rules"  ref="add_ref">
        <el-form-item label="分类名称" prop="title">
          <el-input placeholder="请输入分类名称" maxlength="30" clearable show-word-limit v-model="add_form.title"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <s-file-image @confirm_imsge="add_confirm_image"></s-file-image>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="add_form.sort"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_dialog_visible = false">取 消</el-button>
        <el-button :disabled="store_btn" type="primary" @click="add()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="edit_dialog_visible" :width="percentage_width" @close="edit_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="edit_form" :rules="rules"  ref="edit_ref">
        <el-form-item label="分类名称" prop="title">
          <el-input placeholder="请输入分类名称" maxlength="30" clearable show-word-limit v-model="edit_form.title"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <s-file-image :url="edit_form.image_url" :key="edit_form.id" @confirm_imsge="edit_confirm_image"></s-file-image>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" placeholder="请输入排序" maxlength="10" clearable show-word-limit v-model="edit_form.sort"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_dialog_visible = false">取 消</el-button>
          <el-button :disabled="edit_btn" type="primary" @click="edit_send()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import sFileImage from '../../../../components/s-file-image/s-file-image.vue'
export default {
  components: {
    's-file-image': sFileImage
  },
  data () {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/
      if (regSort.test(value)) {
        return callback()
      }
      callback(new Error('请输入排序（大于0的数字）!'))
    }
    return {
      status_btn: this.is_string('shop/product_type/status'), // 状态按钮是否禁用
      store_btn: this.is_string('shop/product_type/store'), // 添加按钮是否禁用
      edit_btn: this.is_string('shop/product_type/edit'), // 编辑按钮是否禁用
      create_sublevel_btn: this.is_string('shop/product_type/create_sublevel'), // 添加子级按钮是否禁用
      sorts_btn: this.is_string('shop/product_type/sorts'), // 排序按钮是否禁用
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      // 添加对话框是否显示
      add_dialog_visible: false,
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      // 添加子级对话框是否显示
      sublevel_dialog_visible: false,
      add_form: {
        pid: 0,
        level: 1,
        title: '',
        image_id: '',
        sort: 1

      },
      edit_form: {
        id: '',
        title: '',
        image_id: '',
        image_url: '',
        sort: 1
      },
      sublevel_form: {
        sublevel_name: '',
        pid: '',
        level: '',
        title: '',
        image_id: '',
        sort: 1
      },
      rules: {
        title: [
          { required: true, message: '请输入分类名称！', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序！', trigger: 'blur' },
          { validator: checkSort, trigger: 'blur' }
        ]
      },
      list: [] // 列表数据

    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'shop/product_type/index'
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data
        }
      })
    },
    // 菜单状态
    set_status (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'shop/product_type/status',
        data: { id: info.id, status: info.status ? 1 : 0 }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          info.status = !info.status
        }
      })
    },
    // 排序
    set_sorts (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'shop/product_type/sorts',
        data: { id: info.id, sort: info.sort }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          this.get_list()
        }
      })
    },
    // 监听添加对话框的关闭事件
    add_dialog_close () {
      this.$refs.add_ref.resetFields()
    },
    // 添加图片回调
    add_confirm_image (res) {
      this.add_form.image_id = res.image_id
    },
    // 添加按钮
    add () {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'POST',
            url: 'shop/product_type/store',
            data: this.add_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.add_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 打开编辑按钮对话框
    edit (id) {
      this.$base.request({
        that: this,
        url: 'shop/product_type/edit',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.edit_dialog_visible = true
          this.edit_form = res.data
        }
      })
    },
    // 编辑器回调
    edit_confirm_image (res) {
      this.edit_form.image_id = res.image_id
    },
    // 提交编辑数据
    edit_send () {
      console.log(this.edit_form)
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'shop/product_type/update',
            data: this.edit_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.edit_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 监听编辑对话框的关闭事件
    edit_dialog_close () {
      this.$refs.edit_ref.resetFields()
    },
    // 打开添加子级按钮对话框
    sublevel (info) {
      this.sublevel_form.pid = info.id
      this.sublevel_form.level = info.level + 1
      this.sublevel_form.sublevel_name = info.title
      this.sublevel_dialog_visible = true
    },
    // 监听添加子级对话框的关闭事件
    sublevel_dialog_close () {
      this.$refs.sublevel_ref.resetFields()
    },
    // 添加子级图片回调
    sublevel_confirm_image (res) {
      this.sublevel_form.image_id = res.image_id
    },
    // 提交添加子级数据
    create_sublevel () {
      this.$refs.sublevel_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'POST',
            url: 'shop/product_type/create_sublevel',
            data: this.sublevel_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.sublevel_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    }
  }
}
</script>
